{% extends 'backend/backend_base.html' %}


{% block article %}
    <div>
        <h2>添加文章</h2>
        <form action="" method="post">
            {% csrf_token %}
            <p>标题</p>
            <p>
                <input type="text" name="title" class="form-control" id="title">
            </p>
            <p>
                内容(编辑器使用kindeditor)
            </p>
            <p>
                <textarea name="content" id="content" cols="30" rows="10"></textarea>
            </p>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" style="display: inline-block">分类</h3>
                    <span class="glyphicon glyphicon-plus pull-right" style="cursor: pointer;color: #2aabd2"
                          data-toggle="modal" data-target="#myModal"></span>
                    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">添加分类</h4>
                                </div>
                                <div class="modal-body" style="padding: 30px">
                                    分类名 : <input type="text" id="fenlei" placeholder="请输入分类名" style="border-width: 0px">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                                    <button type="button" class="btn btn-primary add_category">确定</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
                <div class="panel-body">
                    {% for category in category_list %}
                        <input type="radio" value="{{ category.pk }}" name="category" style="margin-left: 20px;">
                        {{ category.name }}
                    {% endfor %}
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" style="display: inline-block">标签</h3>
                    <span class="glyphicon glyphicon-plus pull-right" style="cursor: pointer;color: #2aabd2"
                          data-toggle="modal" data-target="#myModal2"></span>
                    <div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">添加标签</h4>
                                </div>
                                <div class="modal-body" style="padding: 30px">
                                    标签名 : <input type="text" id="biaoqian" placeholder="请输入标签名"
                                                 style="border-width: 0px">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                                    <button type="button" class="btn btn-primary add_tag_name">确定</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
                <div class="panel-body">
                    {% for tag in tag_list %}
                        <input type="checkbox" value="{{ tag.pk }}" name="tag" style="margin-left: 20px">{{ tag.name }}
                    {% endfor %}
                </div>
            </div>
            <input type="submit" class="btn btn-danger">
            <div style="height: 100px;"></div>
        </form>


    </div>


    <script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#content', {
                width: '100%',
                height: '450px',
                resizeType: 1,
                uploadJson: '/upload_img/',
                extraFileUploadParams: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                }
            });
        });


        $('.add_category').on('click', function () {
            if ($('#fenlei').val() !== '') {
                $.ajax({
                    url: '/add_category/',
                    type: 'POST',
                    data: {
                        'blog_id':{{ request.user.blog_id }},
                        'category_name': $('#fenlei').val(),
                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                    },
                    success: function (data) {
                        window.location.reload();
                    }
                })
            }
        });
        $('.add_tag_name').on('click', function () {
            if ($('#biaoqian').val() !== '') {
                $.ajax({
                    url: '/add_tag/',
                    type: 'POST',
                    data: {
                        'blog_id':{{ request.user.blog_id }},
                        'tag_name': $('#biaoqian').val(),
                        'csrfmiddlewaretoken': '{{ csrf_token }}',
                        'article_id': '{{ article_obj.pk }}'
                    },
                    success: function (data) {
                        window.location.reload()
                    }
                })
            }
        });
    </script>

{% endblock %}